<template>
	<view class="main-box">
		<z-tabs :list="list" :current="currentPage" @change="tabsChange"
			style="height: 40px;font-weight: 600;font-size: 17px;" bar-width="120" bar-height="5"></z-tabs>

		<z-paging v-show="currentPage == 0" v-model="dataListChat" ref="paging0" @query="queryListChat" :fixed="false"  :auto="false"
			style="background-color: white;" >

			<view v-for="(item, index) in dataListChat" :key="index" class="list-item-box"
				@click="clickNavigatoChat(item)">

				<image class="item-box-head" :src="item.avatar" mode="widthFix">
				</image>

				<view class="item-box-center">
					<text class="text-line-one" style="color: #181818;font-size: 14px;">
						{{ item.nickname }}
					</text>
					<text class="text-line-one" style="color: #7B7B7B;font-size: 12px;">
						{{ item.content }}
					</text>

				</view>

				<view class="item-box-end">
					<text style="color: #ACACAC;font-size: 12px;">
						{{ item.createTime }}
					</text>
					<view v-if="!item.isRead"
						style="background-color: #EB5757; border-radius: 50%; height: 8px; width: 8px;"></view>
				</view>
			</view>

		</z-paging>

		<z-paging v-show="currentPage === 1" v-model="dataListFollow" ref="paging1" @query="queryListFollow"
			:fixed="false" style="background-color: white;">

			<view v-for="(item, index) in dataListFollow" :key="index" class="list-item-box">

				<image class="item-box-head" :src="item.avatar" mode="widthFix">
				</image>

				<view class="item-box-center">
					<text class="text-line-one" style="color: #181818;font-size: 14px;">
						{{ item.nickname }}
					</text>

					<view class="item-box-center-bottom">
						<text class="text-line-one" style="color: #7B7B7B;font-size: 12px;">
							开始关注了你
						</text>

						<text style="color: #ACACAC;font-size: 12px;margin-left: 12px;">
							10-08
						</text>
					</view>

				</view>

				<view class="item-box-end" style="justify-content: center;">
					<button :class="['focus-btn', item.isFollow ? 'followed-btn' : 'unfollowed-btn']"
						@click.stop="toggleFollow(item)">
						{{ item.isFollow ? '已关注' : '关注' }}
					</button>
				</view>
			</view>
		</z-paging>

		<z-paging v-show="currentPage === 2" v-model="dataListTAC" ref="paging2" @query="queryListTAC" :fixed="false"
			style="background-color: white;">

			<view v-for="(item, index) in dataListTAC" :key="index" class="list-item-box">

				<image class="item-box-head" :src="item.avatar" mode="widthFix">
				</image>

				<view class="item-box-center">
					<text class="text-line-one" style="color: #181818;font-size: 14px;">
						{{ item.nickname }}
					</text>

					<view class="item-box-center-bottom">
						<text class="text-line-one" style="color: #7B7B7B;font-size: 12px;">
							{{ item.isLoveOrCollect }}了你的路线规划
						</text>

						<text style="color: #ACACAC;font-size: 12px;margin-left: 12px;">
							{{ item.createTime }}
						</text>
					</view>

				</view>

				<view class="item-box-end" style="justify-content: center;">
					<image style="height: 48px;width: 48px;border-radius: 4px;" :src="item.imageUrl"></image>
				</view>
			</view>
		</z-paging>

		<z-paging v-show="currentPage === 3" v-model="dataListReply" ref="paging3" @query="queryListReply"
			:fixed="false" style="background-color: white;">

			<view v-for="(item, index) in dataListReply" :key="index" class="list-item-box">

				<image class="item-box-head" :src="item.avatar" mode="widthFix">
				</image>

				<view class="item-box-center" style="height: 78px;">
					<text class="text-line-one" style="color: #181818;font-size: 14px;">
						{{ item.nickname }}
					</text>

					<view class="item-box-center-bottom">
						<text class="text-line-one" style="color: #7B7B7B;font-size: 12px;">
							回复了你的评论
						</text>

						<text style="color: #ACACAC;font-size: 12px;margin-left: 12px;">
							{{ item.createTime }}
						</text>
					</view>
					<text class="text-line-one"
						style="color: #181818;font-size: 12px;font-style: normal;font-weight: 400;">
						{{ item.content }}
					</text>
				</view>

				<view class="item-box-end" style="justify-content: center;">
					<image style="height: 48px;width: 48px;border-radius: 4px;" :src="item.imageUrl"></image>
				</view>
			</view>
		</z-paging>



	</view>
</template>

<script>
	import {
		getFollowMeNoticeList,
		getChattedNoticeList,
		queryLoveAndCollectMe,
		getNoticeCommentList,
	} from '@/api/notice.js';
	import {
		postFollow
	} from '@/api/user';
	export default {
		data() {
			return {
				list: ['聊天消息', '新增关注', '赞和收藏', '评论回复'],
				dataListChat: [],
				dataListFollow: [],
				dataListTAC: [],
				dataListReply: [],

				currentPage: 0,
			}
		},
		onShow() {
			// const pageNo = 1; // 假设初始页码为1
			// const pageSize = 10; // 假设每页10条记录
			// this.queryListChat(pageNo, pageSize);
			this.$refs.paging0.reload();
		},
		methods: {
			//tabs通知swiper切换
			tabsChange(index) {
				this.currentPage = index;
				console.log("当前页面：", this.list[this.currentPage])
				const pageNo = 1; // 假设初始页码为1
				const pageSize = 10; // 假设每页10条记录
				switch (this.currentPage) {
					case 0:
						this.queryListChat(pageNo, pageSize);
						break;
					case 1:
						this.queryListFollow(pageNo, pageSize);
						break;
					case 2:
						this.queryListTAC(pageNo, pageSize);
						break;
					case 3:
						this.queryListReply(pageNo, pageSize);
						break;
					default:
						console.warn("未知的页面索引：", this.currentPage);
						break;
				}
			},

			queryListChat(pageNo, pageSize,from) {

				var checkLoginFunction  = require('../../common/chechLoginFunction.js')
				if(checkLoginFunction.checkLogin()==''){
					return
				}

				console.log("queryListChat = ", pageNo, pageSize, from)
				// setTimeout(() => {
				// 	const list = []
				// 	for (var i = 0; i < 10; i++) {
				// 		list.push({
				// 			title: '内容=' + i
				// 		})
				// 	}
				// 	this.$refs.paging0.complete(
				// 		list);

				// }, 0)
				getChattedNoticeList(pageNo, pageSize).then(response => {
					// 更新用户信息和登录状态
					if (response.code == 0) {
						this.$refs.paging0.complete(response.data.list);
					} else {

					}
				}).catch(err =>{
					this.$refs.paging0.complete(false);
				});
			},

			queryListFollow(pageNo, pageSize) {

				if(!uni.getStorageSync('token')){
					return
				}
				console.log("queryListFollow = ", pageNo, pageSize)
				// setTimeout(() => {
				// 	const list = []
				// 	for (var i = 0; i < 10; i++) {
				// 		list.push({
				// 			title: '内容=' + i
				// 		})
				// 	}
				// 	this.$refs.paging1.complete(
				// 		list);

				// }, 0)
				getFollowMeNoticeList().then(response => {
					// 更新用户信息和登录状态
					if (response.code == 0) {
						console.log(response.data)
						this.$refs.paging1.complete(response.data.list);
					} else {

					}
				}).catch(err =>{
					this.$refs.paging1.complete(false);
				});
			},

			queryListTAC(pageNo, pageSize) {
				if(!uni.getStorageSync('token')){
					return
				}
				console.log("queryListTAC = ", pageNo, pageSize)
				// setTimeout(() => {
				// 	const list = []
				// 	for (var i = 0; i < 10; i++) {
				// 		list.push({
				// 			title: '内容=' + i
				// 		})
				// 	}
				// 	this.$refs.paging2.complete(
				// 		list);

				// }, 0)
				queryLoveAndCollectMe(pageNo, pageSize).then(response => {
					// 更新用户信息和登录状态
					if (response.code == 0) {
						this.$refs.paging2.complete(response.data.list);
					} else {

					}
				}).catch(err =>{
					this.$refs.paging2.complete(false);
				});
			},

			queryListReply(pageNo, pageSize) {
				if(!uni.getStorageSync('token')){
					return
				}
				console.log("queryListReply = ", pageNo, pageSize)
				// setTimeout(() => {
				// 	const list = []
				// 	for (var i = 0; i < 10; i++) {
				// 		list.push({
				// 			title: '内容=' + i
				// 		})
				// 	}
				// 	this.$refs.paging3.complete(
				// 		list);

				// }, 0)
				getNoticeCommentList(pageNo, pageSize).then(response => {
					// 更新用户信息和登录状态
					if (response.code == 0) {
						this.$refs.paging3.complete(response.data.list);
					} else {

					}
				}).catch(err =>{
					this.$refs.paging3.complete(false);
				});
			},
			async toggleFollow(item) {
				item.isFollow = !item.isFollow;
				const userId = uni.getStorageSync('userId');
				// 在此处理实际的关注或取消关注逻辑，如发起 API 请求
				const data = {
					followId: userId,
					followedId: item.followId,
					isFollow: item.isFollow,
				};
				await postFollow(data)
					.then(response => {
						if (response.code == 200) {
							this.userInfo = response.data;
						} else {

						}
					})
					.catch(error => {
						console.error('点赞失败:', error);
					});
			},
			clickNavigatoChat(info) {
				const targetId = info.userId; // 将对象序列化并编码
				console.log("clickNavigatoChat", info.userId)
				uni.navigateTo({
					url: `/packageMixture/pages/chat/chat?targetId=${targetId}`
				})
			}
		}
	}
</script>

<style>
	.main-box {
		width: 100%;
		/* position: relative;
		flex: 1; */
		height: 100%;
		position: fixed;
	}

	.box-chat {
		background-color: #FFF;

		position: absolute;
		top: 40px;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.list-item-box {
		display: flex;
		align-items: start;
		margin: 12px 16px 12px 16px;
	}

	.item-box-head {
		height: 48px;
		width: 48px;
		border-radius: 50%;
	}

	.item-box-center {
		width: 0px;
		height: 48px;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 10px 0 10px;
	}

	.item-box-center-bottom {
		display: -webkit-flex;
		-webkit-flex-direction: row;
	}

	.item-box-end {
		height: 48px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;

	}

	.text-line-one {
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 1;
	}

	.focus-btn {
		min-width: 112rpx;
		height: 53rpx;
		font-size: 26rpx;
		border-radius: 36rpx;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		transition: background-color 0.3s, color 0.3s, border 0.3s;

	}

	.unfollowed-btn {
		background-color: #2F6EF5;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.followed-btn {
		background-color: #ffffff;
		color: #aaaaaa;
		font-size: 24rpx;
		border: 1px solid #aaaaaa;
		display: flex;
		padding: 10rpx 20rpx;
		justify-content: center;
		align-items: center;
		text-align: center;

	}
</style>